<template>
	<view>
		<!-- 商品 -->
		<view class="goods_box">
			<block v-for="(item, index) in goods" :key="index">
				<view class="goods"  :data-url="'/pages/goods/goods?id='+item.goods_id" @tap="gotopage">
					<view class="good_img">
						<image :src="item.image" mode=""></image>
					</view>
					<!-- <view class="title">{{item.shop}}</view> -->
					<view class="title02">{{ item.name }}</view>
					<!-- <view class="state_box">
					<block v-for="(item02, index) in item.state">
					<view class="state">{{item02.s}}</view>
					</block>				
				</view> -->
					<view class="money_box">
						<view class="money">
							<view class="m">¥</view>
					
							<view class="y">
								{{ item.price }}
						
							</view>
						</view>
						<view class="car_menu iconfont"  @tap.stop="del(item.id)">取消收藏</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			goods: [
				
			],
		};
	},
    onLoad() {
      this.lod()
    },
	methods: {
		gotopage(e) {
			console.log(1)
			let url = e.currentTarget.dataset.url;
				
			uni.navigateTo({
				url: url
			});
		},
		del(id) {
			let me = this;
			uni.showModal({
				content: '确定删除？',
				success: (res) => {
					if (res.confirm) {
						
						me.Net._get('collectDel',{id:id},(res)=>{
							if(res.code ==1){
								me.lod()
							}
						});		
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
			
		},
		lod(e) {
			let me = this;
			me.Net._get('collectList',{},(res)=>{
				if(res.code ==1){
					console.log(res.data)
					me.goods=res.data
				}
			});
		},
		
	},
	gotopage(e) {
			console.log(1)
			let url = e.currentTarget.dataset.url;
				
			uni.navigateTo({
				url: url
			});
		},
};
</script>

<style>
	page {
		padding-top: 10px;
		background-color: #fff;
	}

	.goods_box {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
	}

	.goods_box::after {
		flex: auto;
		content: '';
	}

	.goods_box .goods {
		width: 45%;
		flex-basis: auto;
		margin-bottom: 3%;
		margin-left: 3%;
		border-radius: 4px;
		background-color: #fff;
		position: relative;
		box-shadow: 0px 4px 4.65px 0.35px rgba(51, 51, 51, 0.09);
		border-radius: 15rpx;
		overflow: hidden;
		padding: 20rpx 20rpx 40px;
		
	}

	.goods_box .goods .good_img {
		width: 100%;
		height: 160px;
	}

	.goods_box .goods .good_img image {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
	}

	.goods_box .goods .title {
		font-size: 3.5vw;
		color: #232426;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		padding: 0 5px;
		line-height: 20px;
		font-weight: bold;
		margin-top: 10px;
	}

	.goods_box .goods .title02 {
		font-size: 3.5vw;
		color: #232426;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		padding: 5px 5px 0vw 5px;
		line-height: 20px;
	}

	.goods_box .goods .state_box {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
		margin-top: 10px;
	}

	.goods_box .goods .state_box::after {
		flex: auto;
		content: '';
	}

	.goods_box .goods .state_box .state {
		flex-basis: auto;
		margin-bottom: 3%;
		margin-left: 3%;
		border-radius: 4px;
		background-color: #fff;
		font-size: 8px;
		color: #4d726f;
		padding: 5px;
	}

	.goods_box .goods .money_box {
		width: 100%;
		height: 40px;
		display: flex;
		position: absolute;
		bottom: 0;
	}

	.goods_box .goods .car_menu {


		padding: 5px;
		border-radius: 15px;
		background-color: #fd391f;
		font-size: 10px;
		color: #fff;
		position: absolute;
		right: 30rpx;
		top: 7px;
	}

	.goods_box .goods .money_box .money {
		width: 50%;
		display: flex;
		line-height: 40px;
		color: #fe4816;
		font-size: 14px;
		margin-left: 3%;
	}

	.goods_box .goods .money_box .money .m {
		font-size: 10px;
		margin-top: 0px;
		margin-right: 5px;
	}

	.goods_box .goods .money_box .money .y {
		font-size: 10px;
		margin-top: 0px;
		margin-left: 5px;
		position: relative;
	}

	.goods_box .goods .money_box .money .y .line {
		width: 100%;
		height: 1px;
		position: absolute;
		left: 0;
		top: calc(50% - 0.5px);
		background-color: #999;
	}

	.goods_box .goods .money_box .num {
		width: 50%;
		display: flex;
		line-height: 40px;
		color: #999;
		font-size: 10px;

		text-align: right;
	}
</style>
